<template>
	<div class="main_container" style="width: 100%">
		<el-header style="text-align: right; font-size: 12px">
			<div class="pageHeader_container">
				<el-page-header @onclick="goBack" content="诊毕"></el-page-header>
			</div>
		</el-header>
		<el-main>
			<div class="main_container">
				<el-card class="box-card">
					<!--搜索区域-->
					<el-row :gutter="20">
						<el-col :span="8">
							<el-input placeholder="病历号查询" v-model="user.caseNumber" clearable @clear="getList">
								<el-button slot="append" icon="el-icon-search" @click="selectBycaseNumber()"></el-button>
							</el-input>
						</el-col>
						<el-col :span="8">
							<el-input placeholder="姓名查询" v-model="user.realName" clearable @clear="getList">
								<el-button slot="append" icon="el-icon-search" @click="selectByName()"></el-button>
							</el-input>
						</el-col>
					</el-row>
					<!--用户列表区-->
					<el-table height="500"  :data="list" border stripe >
						<el-table-column type="expand">
							<template slot-scope="scope">
								<el-row >
									<el-col span="5">
										<el-tag >身份证号:{{scope.row.idNumber}}</el-tag>
									</el-col>
									<el-col span="5">
										<el-tag>出生日期:{{scope.row.birthDate}}</el-tag>
									</el-col>
									<el-col span="4">
										<el-tag>年龄:{{scope.row.age}}</el-tag>
									</el-col>
									<el-col span="5">
										<el-tag>年龄类型:{{scope.row.ageType}}</el-tag>
									</el-col>
									<el-col span="5">
										<el-tag>家庭住址:{{scope.row.homeAddress}}</el-tag>
									</el-col>
								</el-row>
								<el-row >
									<el-col span="5">
										<el-tag >本次看诊日期:{{scope.row.visitDate}}</el-tag>
									</el-col>
									<el-col span="5">
										<el-tag>午别:{{scope.row.noon}}</el-tag>
									</el-col>
									<el-col span="4">
										<el-tag>本次挂号科室ID:{{scope.row.deptID}}</el-tag>
									</el-col>
									<el-col span="5">
										<el-tag>本次挂号医生ID:{{scope.row.userID}}</el-tag>
									</el-col>
									<el-col span="5">
										<el-tag>本次挂号级别ID:{{scope.row.registerLID}}</el-tag>
									</el-col>
								</el-row>
								<el-row >
									<el-col span="5">
										<el-tag >结算类别ID:{{scope.row.settleID}}</el-tag>
									</el-col>
									<el-col span="5">
										<el-tag>病历本要否:{{scope.row.isBook}}</el-tag>
									</el-col>
									<el-col span="4">
										<el-tag>挂号时间:{{scope.row.registTime}}</el-tag>
									</el-col>
									<el-col span="5">
										<el-tag>挂号员ID:{{scope.row.registerID}}</el-tag>
									</el-col>
									<el-col span="5">
										<el-tag>本次看诊状态:{{scope.row.visitState}}</el-tag>
									</el-col>
								</el-row>
								
							</template>
						</el-table-column>
						<el-table-column type="index"></el-table-column>
						<el-table-column label="ID" prop="id"></el-table-column>
						<el-table-column label="病历号" prop="caseNumber"></el-table-column>
						<el-table-column label="姓名" prop="realName"></el-table-column>
						<el-table-column label="性别" prop="gender">
							<template v-slot="scope">
								<el-tag v-if="scope.row.gender===71" >男</el-tag>
								<el-tag v-else type="danger">女</el-tag>
							</template>
						</el-table-column>
						
						<el-table-column label="操作" width="180" align="center">
							<template slot-scope="scope">
								<el-tooltip class="item" effect="dark" content="删除" placement="top" :enterable="false">
									<el-button icon="el-icon-check" size="mini" @click="dodelete(scope.row.caseNumber)">诊毕</el-button>
								</el-tooltip>
							</template>
						</el-table-column>
					
					</el-table>
					
					
				</el-card>
			</div>
		</el-main>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				user: {
					id:'',
					caseNumber:'',
					realName:'',
					gender:'',
					idNumber:'',
					birthDate:'',
					age:'',
					ageType:'',
					homeAddress:'',
					visitDate:'',
					noon:'',
					deptID:'',
					userID:'',
					registLeID:'',
					settleID:'',
					isBook:'',
					registTime:'',
					registerID:'',
					visitState:''
				},
				list: [],
			}

		},
		created() {
			this.getList()
		},
		methods: {
			goBack() {
				alert('go back');
			},
			getList() {
				let url = 'http://localhost:8888/register/selectAll';
				let param = this.$qs.stringify(this.user);
				this.$axios.post(url, param)
					.then((resp) => {
						this.list = resp.data;
					})
					.catch((err) => {
						console.log('error=', err);
					})
			},
			selectBycaseNumber(){
				let url = 'http://localhost:8888/register/selectByCaseNumber';
				let param = this.$qs.stringify(this.user);
				this.$axios.post(url, param)
					.then((resp) => {
						this.list = resp.data;
					})
					.catch((err) => {
						console.log('error=', err);
					})
			},
			selectByName(){
				let url = 'http://localhost:8888/register/selectByName';
				let param = this.$qs.stringify(this.user);
				this.$axios.post(url, param)
					.then((resp) => {
						this.list = resp.data;
					})
					.catch((err) => {
						console.log('error=', err);
					})
			},
			async dodelete(caseNumber){
				const confirmResult = await this.$confirm('是否诊毕?', '提示', {
				          confirmButtonText: '确定',
				          cancelButtonText: '取消',
				          type: 'warning'})
						  .catch(err => err)
				if(confirmResult !='confirm'){
					return this.$message.info("已取消")
				}
				let url='http://localhost:8888/register/delete';
				this.$axios.get(url+'?'+'caseNumber='+caseNumber)
					.then( (resp)=>{
						let i=resp.data;
						if(i>0){
				            alert("操作成功")
							window.location.reload()
							
						}
					} )
					.catch( (err)=>{
						console.log('error=', err);
					} )
			}
		}
	}
</script>

<style scoped>
	.box-card {
		box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !;
	}
	.el-tag{
		margin: 0.4375rem;
	}
</style>
